<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="back"><i class="zmdi zmdi-arrow-left"></i>&nbsp;&nbsp;返回列表</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-tabs active-name="content">
        <el-tab-pane label="基本信息" name="content">
          <el-row :gutter="20">
            <el-col :span="4">
              <div style="text-align: center">
                <img class="title-img" alt="" v-bind:src="curObject.avatar">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="content-body">
                <h1>基本信息</h1>
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>Id</dt>
                    <dd>{{curObject.id}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>登录名</dt>
                    <dd>{{curObject.login_name}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>昵称</dt>
                    <dd>{{curObject.nickname}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>性别</dt>
                    <dd>{{this.genderToString(curObject.gender)}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>地区</dt>
                    <dd>{{curObject.area_name}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>电话</dt>
                    <dd>{{curObject.phone}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>邮箱</dt>
                    <dd>{{curObject.email}}</dd>
                  </dl>
                </div>
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>注册类型</dt>
                    <dd>{{this.typeToString(curObject.type)}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>注册时间</dt>
                    <dd>{{curObject.create_time}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>最近登录</dt>
                    <dd>{{curObject.last_login}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>是否禁用</dt>
                    <dd>
                      {{this.booleanToString(curObject.disable)}}
                      <el-button v-if="curObject.disable===1" type="text" size="mini" @click="handleDisable(0)">改为启用</el-button>
                      <el-button v-if="curObject.disable===0" type="text" size="mini" @click="handleDisable(1)">改为禁用</el-button>
                    </dd>
                  </dl>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="content-body">
                <div v-if="curObject.type===0">
                  <h1>学生信息</h1>
                  <div class="block">
                    <dl class="dl-horizontal">
                      <dt>姓名</dt>
                      <dd>{{curObject.name}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>年级</dt>
                      <dd>{{curObject.grade_name}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>家长ID</dt>
                      <dd>{{curObject.pid}}</dd>
                    </dl>
                  </div>
                </div>
                <div v-else-if="curObject.type===2">
                  <h1>教师信息</h1>
                  <div class="block">
                    <dl class="dl-horizontal">
                      <dt>认证状态</dt>
                      <dd>
                        {{this.verifyToString(curObject.teacher.verify_status)}}
                        <a v-if="curObject.teacher" @click="handleVerify">更改</a>
                      </dd>
                      <dt>是否推荐</dt>
                      <dd>
                        {{this.booleanToString(curObject.teacher.in_first)}}
                        <el-button v-if="curObject.teacher.in_first===1" type="text" size="mini" @click="handleInFirst(0)">取消推荐</el-button>
                        <el-button v-if="curObject.teacher.in_first===0" type="text" size="mini" @click="handleInFirst(1)">设置推荐</el-button>
                      </dd>
                    </dl>
                  </div>
                  <div class="block">
                    <dl class="dl-horizontal">
                      <dt>称呼姓名</dt>
                      <dd>{{curObject.teacher.teacher_name}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>年级阶段</dt>
                      <dd>{{this.gradeTypeToString(curObject.teacher.grade_type)}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>科目标签</dt>
                      <dd>{{curObject.teacher.subject_info}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>教师简介</dt>
                      <dd>{{curObject.teacher.summary}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>图文介绍</dt>
                      <dd>{{curObject.teacher.introduction}}</dd>
                    </dl>
                  </div>
                </div>
                <div v-else-if="curObject.type==3">
                  <h1>机构信息</h1>
                </div>
                <div v-else-if="curObject.type==4">
                  <h1>活动发布者信息</h1>
                  <div class="block">
                    <dl class="dl-horizontal">
                      <dt>认证状态</dt>
                      <dd>
                        {{this.verifyToString(curObject.publisher.verify_status)}}
                        <a v-if="curObject.publisher" @click="handleVerify">更改</a>
                      </dd>
                    </dl>
                  </div>
                  <div class="block">
                    <dl class="dl-horizontal">
                      <dt>称呼姓名</dt>
                      <dd>{{curObject.publisher.publisher_name}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>简介</dt>
                      <dd>{{curObject.publisher.summary}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>活动个数</dt>
                      <dd>{{curObject.publisher.activity_count}}</dd>
                    </dl>
                    <dl class="dl-horizontal">
                      <dt>图文介绍</dt>
                      <dd>{{curObject.publisher.introduction}}</dd>
                    </dl>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col v-if="curObject.certificate" v-bind:span="7">
              <div class="content-body">
              <h1>证件信息</h1>
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>真实姓名</dt>
                    <dd>{{ curObject.certificate.real_name }}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>证件号码</dt>
                    <dd>{{ curObject.certificate.id_num }}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>证件照片</dt>
                    <dd><img style="width: 100%;margin-top: 4px;" alt="" v-bind:src="curObject.certificate.id_image_url"></img>
                    </dd>
                  </dl>
                </div>
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>联系地址</dt>
                    <dd>{{curObject.certificate.contact_address}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>联系电话</dt>
                    <dd>{{curObject.certificate.contact_phone}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>收款方式</dt>
                    <dd>{{curObject.certificate.payee_type}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>收款账号</dt>
                    <dd>{{curObject.certificate.payee_account}}</dd>
                  </dl>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import API from '../../api'
  import Mixin from './user-mixin'

  export default {
    mixins: [Mixin],

    data: function () {
      return {
        curId: '',
        curType: '',
        curObject: {}
      }
    },
    created: function () {
      this.curId = this.$route.params.id
      this.fetchData()
    },

    methods: {
      back: function () {
        this.$router.replace('/user')
      },
      handleVerify: function () {
        this.$confirm('此操作将更改当前用户认证结果', '操作', {
          confirmButtonText: '通过认证',
          cancelButtonText: '拒绝认证',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this.updateVerify(1)
        }).catch(() => {
          this.updateVerify(2)
        })
      },
      updateVerify: function (verify) {
        if (this.curObject.teacher && this.curObject.teacher.verify_status === verify) {
          return
        }
        if (this.curObject.publisher && this.curObject.publisher.verify_status === verify) {
          return
        }
        var params = { 'uid': this.curId, 'verify_status': verify }
        API.userVerify(params,
          (data) => {
            if (this.curObject.teacher) {
              this.curObject.teacher.verify_status = verify
            }
            if (this.curObject.publisher) {
              this.curObject.publisher.verify_status = verify
            }
          }
        )
      },
      handleDisable: function (disable) {
        var params = { 'id': this.curId, 'disable': disable }
        API.userDisable(params,
          (data) => {
            if (!data) return
            this.curObject.disable = disable
          }
        )
      },
      handleInFirst: function (inFirst) {
        var params = { 'uid': this.curId, 'in_first': inFirst }
        API.userInFirst(params,
          (data) => {
            if (this.curObject.teacher) {
              this.curObject.teacher.in_first = inFirst
            }
            if (this.curObject.publisher) {
              this.curObject.publisher.in_first = inFirst
            }
          }
        )
      },
      fetchData: function () {
        var params = { 'id': this.curId }
        API.userInfo(params,
          (data) => {
            if (!data) return
            this.curObject = data
            var breadcrumbs = []
            breadcrumbs.push({
              index: this.$route.path,
              name: data.nickname
            })
            this.$store.dispatch('updateBreadcrumb', breadcrumbs)
          }
        )
      }
    },
    beforeRouteLeave: function (to, from, next) {
      this.$store.dispatch('updateBreadcrumb', [])
      next()
    }
  }

</script>

<style scoped>
  .title-img {
    border-radius: 3px;
    margin-bottom: 10px;
  }

  .content-body {
    padding: 0px 10px 0px 10px
  }

  .block {
    margin-bottom: 20px;
  }

  dt {
    width: 60px;
  }

  dd {
    margin-left: 75px;
    word-wrap: break-word
  }

</style>
